<template>
  <div class="payCode">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">支付二维码</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem">
      <group-title class="title">会员卡付款二维码</group-title>
      <card class="codeWrap">
        <div class="card-padding" slot="content">
          <div class="barCode">
            <qrcode :value="codeValue" type="img"></qrcode>
            <div>动态支付码，每隔<span v-text="refreshTime"></span>分钟刷新一次</div>
            <div class="clickRefresh" @click="clickChange">>>点击刷新支付码<<</div>
          </div>
        </div>
      </card>
    </box>
  </div>
</template>

<script>
  import { Box, GroupTitle ,Card , Qrcode } from 'vux'
  import {getPayCodeValue} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'payCode',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        refreshInterval:'',
        codeValue:'',
        refreshTime:3//分钟
      }
    },
    components:{
      Box,
      GroupTitle,
      Card,
      Qrcode
    },
    computed:{

    },
    methods:{
      clickChange(){
        clearInterval(this.refreshInterval)
        this.startInterval()
      },
      startInterval(){
        this.changeCode()
        this.refreshInterval = setInterval(() => {
          this.changeCode()
        }, this.refreshTime*60*1000)
      },
      changeCode(){
        this.$store.commit('updateLoadingStatus',{isLoading:true})
        getPayCodeValue().then((res)=>{
          if(res.status == 'success'){
            this.codeValue = res.data
          }else if(res.status == 'error'){
            console.log('getPayCodeValue error info:',res.msg)
            message({message:res.msg,type: 'error'})
          }
          this.loadingStatus = false
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }).catch((err)=>{console.log('getPayCodeValue catch info:',err)})
      }
    },
    mounted(){
      this.startInterval()
    },
    beforeDestroy(){
      clearInterval(this.refreshInterval)
    }
  }
</script>

<style lang="scss" scoped>
  .payCode{
    height: 100%;
    background-color: #3a8ee6;color: #fff;
    background-image: -webkit-linear-gradient(top,#84b9f1,#3a8ee6);
    background-image: -moz-linear-gradient(top,#84b9f1,#3a8ee6);
    background-image: -ms-linear-gradient(top,#84b9f1,#3a8ee6);
    background-image: -o-linear-gradient(top,#84b9f1,#3a8ee6);
    background-image: linear-gradient(top,#84b9f1,#3a8ee6);
    .title{color: #fff;}
    .codeWrap{
      border:1px solid #eee;border-radius: 0.3rem;-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      .barCode{
        text-align: center;margin: 1.5rem 0;
        div{line-height:2rem;font-size: 0.9rem;color: #878787;}
        .clickRefresh{color: #0793f5;}
      }
    }
  }
</style>
